<template>
<div>
  <!-- 标题 -->
  <van-nav-bar left-text="返回" left-arrow>
    <template #right>
      <input type="text">
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <van-tabs v-model="active" @click="onClick">
    <van-tab to="/Region" name="region">区域</van-tab>
    <van-tab to="/Way" name="way">方式</van-tab>
    <van-tab to="/Rent" name="rent">租金</van-tab>
    <van-tab to="/Screen" name="screen">筛选</van-tab>
  </van-tabs>

  <keep-alive>
    <!-- 二级路由出口 -->
    <router-view></router-view>
  </keep-alive> 
  
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    >  
      <van-cell 
        v-for="item in info" 
        :key="item.houseCode" 
        :title="item"
        @click="toDetail(item.id)"
      >
        <img :src="item.houseImg" alt="">
        <div>
          <li>{{ item.title }}</li>
          <li>{{ item.desc }}</li>
          <li>{{ item.tags }}</li>
          <li>{{ item.price }}元/月</li>
        </div>
      </van-cell>
      
   </van-list>
  
</div>

</template>

<script>
import { Toast } from 'vant';
import axios from "axios";

export default {
  name: 'LookForHousing',
  data() {
    return {
      info: null,
      activeName: 'region',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    onClick(name, title) {
      Toast(title);
    },

     onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    toDetail(id) {
      // 使用编程式导航跳转页面
      this.$router.push({
        name: 'content',
        query: {
          id,
        }
      })
    }
  },

  // 在created钩子中发起请求
  async created() {
    const { data } = await axios({ url:'http://liufusong.top:8080/houses'})

    // 让data中的info接收data中的数据
    console.log(data);

    this.info = data.body.list
  },
  activated() {
    console.log('缓存组件被激活');
  },
  deactivated() {
    console.log('缓存组件被隐藏');
  },
};
</script>
<style scoped>
</style>